<script lang="ts" setup name="systemUser">
import type { DialogModel, DrawerModel, User, UserQueryCondition } from '@/index.d';
import { urls, isAdmin, getListByConditionsWithPage } from '@/index';
import { useRequest } from 'vue-request';
import UserDetailDialog from './UserDetailDialog.vue';
import RoleDispatchDrawer from './RoleDispatchDrawer.vue';

const title = '用户';

const userQueryCondition = reactive<UserQueryCondition>({
  includeAfter: false,
  change: false,
  currentPage: 1,
  pageSize: 20,
  deleted: false
});

const resetUserQueryCondition = () => {
  userQueryCondition.includeAfter = false;
  userQueryCondition.change = false;
  userQueryCondition.currentPage = 1;
  userQueryCondition.pageSize = 20;
  delete userQueryCondition.departmentId;
  delete userQueryCondition.username;
  delete userQueryCondition.workNo;
  delete userQueryCondition.name;
  delete userQueryCondition.idCard;
  delete userQueryCondition.gender;
  delete userQueryCondition.educationLevel;
  delete userQueryCondition.graduateSchool;
  delete userQueryCondition.major;
};

const {
  data: userListWithPage,
  loading,
  run: getUserListWithPage
} = useRequest(() => getListByConditionsWithPage<User>(urls.user, userQueryCondition));

const handleResetQuery = () => {
  resetUserQueryCondition();
  getUserListWithPage();
};

// 监控搜索栏目中的下拉菜单的变化，当有变化时，重新查询数据
watch(
  () => [
    userQueryCondition.departmentId,
    userQueryCondition.gender,
    userQueryCondition.educationLevel,
    userQueryCondition.includeAfter
  ],
  () => getUserListWithPage()
);

const userDetailDialogModel = reactive<DialogModel<User>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => userDetailDialogModel.visible,
  value => {
    if (!value && userDetailDialogModel.change) {
      getUserListWithPage();
      userDetailDialogModel.change = false;
    }
  }
);

const roleDispatchDrawerModel = reactive<DialogModel<User>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

const currentUser = reactive<User>({});

const handleRoleDispatch = (row: User) => {
  roleDispatchDrawerModel.visible = true;
  currentUser.id = row.id;
  currentUser.name = row.name;
};

const handleExport = () => {
  ElMessage.success('handleImport');
};
</script>
<template>
  <HqContainerTable
    :title
    :loading
    :baseUrl="urls.user"
    :total="userListWithPage?.total"
    :table-data="userListWithPage?.records"
    logic-delete
    operate-column
    v-model:page-size="userQueryCondition.pageSize"
    v-model:current-page="userQueryCondition.currentPage"
    @handle-query="getUserListWithPage"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getUserListWithPage"
    v-model:detail-dialog-model="userDetailDialogModel"
    @handle-export="handleExport"
  >
    <template #search>
      <hq-col kind="search">
        <HqCascaderDepartment v-model:current="userQueryCondition.departmentId" clearable />
      </hq-col>

      <hq-col kind="search">
        <el-switch
          v-model="userQueryCondition.includeAfter"
          active-text="包含下级部门"
          inactive-text="仅查询本级部门"
          :disabled="userQueryCondition.departmentId === undefined"
        />
      </hq-col>

      <hq-col kind="search">
        <el-select v-model="userQueryCondition.gender" placeholder="请选择性别" clearable>
          <HqGenderOptions />
        </el-select>
      </hq-col>

      <hq-col kind="search">
        <el-input v-model="userQueryCondition.username" placeholder="请输入账号" clearable />
      </hq-col>

      <hq-col kind="search">
        <el-input v-model="userQueryCondition.workNo" placeholder="请输入工号" clearable />
      </hq-col>

      <hq-col kind="search">
        <el-input v-model="userQueryCondition.name" placeholder="请输入姓名" clearable />
      </hq-col>

      <hq-col kind="search">
        <el-input v-model="userQueryCondition.idCard" placeholder="请输入身份证号码" clearable />
      </hq-col>

      <hq-col kind="search">
        <el-select v-model="userQueryCondition.educationLevel" placeholder="请选择学历" clearable>
          <HqEducationLevelOptions />
        </el-select>
      </hq-col>

      <hq-col kind="search">
        <el-input
          v-model="userQueryCondition.graduateSchool"
          placeholder="请输入毕业学校"
          clearable
        />
      </hq-col>

      <hq-col kind="search">
        <el-input v-model="userQueryCondition.major" placeholder="请输入专业" clearable />
      </hq-col>

      <hq-col kind="search" v-if="isAdmin()">
        <el-checkbox
          v-model="userQueryCondition.deleted"
          true-value="true"
          false-value="false"
          @change="handleResetQuery"
        >
          是否停用
        </el-checkbox>
      </hq-col>
    </template>

    <template #button> </template>

    <template #tableColumns>
      <hq-table-column label="分配角色" v-if="isAdmin() && !userQueryCondition.deleted">
        <template #default="{ row }">
          <el-button link type="success" size="small" @click="handleRoleDispatch(row)">
            分配角色
          </el-button>
        </template>
      </hq-table-column>
      <hq-table-column prop="name" label="姓名" />
      <hq-table-column prop="username" label="帐号" />
      <hq-table-column prop="email" label="邮箱" :min-width="350" />
      <hq-table-column prop="workNo" label="工号" />
      <hq-table-column prop="department.label" label="部门" :min-width="250" />
      <hq-table-column prop="gender" label="性别" />
      <hq-table-column prop="phone" label="电话" />
      <hq-table-column prop="idCard" label="身份证" :min-width="200" />
      <hq-table-column prop="educationLevel" label="学历" />
      <hq-table-column prop="graduateSchool" label="毕业学校" />
      <hq-table-column prop="graduateDate" label="毕业时间" />
      <hq-table-column prop="major" label="专业" />
    </template>

    <template #pagination> </template>
  </HqContainerTable>

  <UserDetailDialog
    v-model:dialog-model="userDetailDialogModel"
    v-if="userDetailDialogModel.visible"
  />

  <RoleDispatchDrawer
    v-model:drawer-model="roleDispatchDrawerModel"
    v-model:current-user="currentUser"
    v-if="roleDispatchDrawerModel.visible"
  />
</template>
<style lang="scss" scoped></style>
